<template>
  <a-modal
    :title="title"
    :width="900"
    :visible="visible"
    :footer="null"
    @cancel="handleCancel">
    
    <a-spin :spinning="loading">
      <!-- 查询条件 -->
      <div class="table-page-search-wrapper" style="margin-bottom: 16px;">
        <a-form layout="inline">
          <a-form-item label="操作类型">
            <a-select v-model="queryParam.operationType" placeholder="请选择操作类型" allowClear style="width: 120px;">
              <a-select-option :value="1">入库</a-select-option>
              <a-select-option :value="2">出库</a-select-option>
              <a-select-option :value="3">调整</a-select-option>
              <a-select-option :value="4">预留</a-select-option>
              <a-select-option :value="5">释放</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="searchLogs" icon="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="resetSearch" icon="reload">重置</a-button>
          </a-form-item>
        </a-form>
      </div>

      <!-- 变动记录表格 -->
      <a-table
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        :loading="loading"
        size="small"
        @change="handleTableChange">

        <template slot="operationType" slot-scope="text">
          <a-tag v-if="text == 1" color="green">入库</a-tag>
          <a-tag v-else-if="text == 2" color="red">出库</a-tag>
          <a-tag v-else-if="text == 3" color="blue">调整</a-tag>
          <a-tag v-else-if="text == 4" color="orange">预留</a-tag>
          <a-tag v-else-if="text == 5" color="purple">释放</a-tag>
        </template>

        <template slot="quantityChange" slot-scope="text, record">
          <div>
            <span>{{ record.beforeQuantity }} → {{ record.afterQuantity }}</span>
            <br/>
            <span :style="getQuantityChangeStyle(record)">
              {{ getQuantityChangeText(record) }}
            </span>
          </div>
        </template>

      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  name: 'InventoryLogModal',
  data() {
    return {
      title: "库存变动记录",
      visible: false,
      loading: false,
      inventoryId: '',
      queryParam: {
        operationType: null
      },
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: (total) => `共 ${total} 条记录`,
      },
      columns: [
        {
          title: '操作时间',
          dataIndex: 'createTime',
          width: 150,
          sorter: true,
        },
        {
          title: '操作类型',
          dataIndex: 'operationType',
          width: 80,
          scopedSlots: { customRender: 'operationType' }
        },
        {
          title: '数量变化',
          dataIndex: 'quantityChange',
          width: 120,
          scopedSlots: { customRender: 'quantityChange' }
        },
        {
          title: '操作数量',
          dataIndex: 'operationQuantity',
          width: 80,
        },
        {
          title: '操作原因',
          dataIndex: 'operationReason',
          width: 150,
          ellipsis: true,
        },
        {
          title: '关联单据',
          dataIndex: 'relatedDocNo',
          width: 120,
        },
        {
          title: '操作员',
          dataIndex: 'operatorName',
          width: 100,
        }
      ]
    }
  },
  methods: {
    show(inventoryId) {
      this.visible = true;
      this.inventoryId = inventoryId;
      this.loadLogs();
    },
    async loadLogs() {
      this.loading = true;
      try {
        const params = {
          inventoryId: this.inventoryId,
          operationType: this.queryParam.operationType,
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        };

        const res = await getAction('/wms/finished-goods/inventory/logs', params);
        if (res.success) {
          this.dataSource = res.result.records || [];
          this.pagination.total = res.result.total || 0;
        }
      } catch (error) {
        this.$message.error('加载变动记录失败');
        console.error('加载变动记录失败', error);
      } finally {
        this.loading = false;
      }
    },
    searchLogs() {
      this.pagination.current = 1;
      this.loadLogs();
    },
    resetSearch() {
      this.queryParam.operationType = null;
      this.pagination.current = 1;
      this.loadLogs();
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.loadLogs();
    },
    getQuantityChangeText(record) {
      const change = record.afterQuantity - record.beforeQuantity;
      if (change > 0) {
        return `+${change}`;
      } else if (change < 0) {
        return `${change}`;
      }
      return '0';
    },
    getQuantityChangeStyle(record) {
      const change = record.afterQuantity - record.beforeQuantity;
      if (change > 0) {
        return { color: '#52c41a' };
      } else if (change < 0) {
        return { color: '#f5222d' };
      }
      return { color: '#666' };
    },
    handleCancel() {
      this.close();
    },
    close() {
      this.visible = false;
      this.inventoryId = '';
      this.queryParam.operationType = null;
      this.dataSource = [];
      this.pagination.current = 1;
      this.pagination.total = 0;
    }
  }
}
</script>
